<template>
  <div class="addBrand-container">
    <el-page-header @back="goBack" :content="content" style="margin-bottom:20px">
    </el-page-header>
    <div class="container">
      <el-form ref="ruleForm"
               :model="ruleForm"
               :inline="false"
               label-width="180px"
               class="demo-ruleForm">

        <div class="first">
            <el-form-item label="订单号:"
                        prop="number"
                        class="idNumber">
            <el-input v-model="ruleForm.number"
                      placeholder="订单号"
                      :disabled="true">
            </el-input>
          </el-form-item>

          <el-form-item label="订单金额:"
                        prop="amount"
                        class="idNumber">
            <el-input v-model="ruleForm.amount"
                      placeholder="金额"
                      :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>

        <div class="second">
          <el-form-item label="下单时间:"
                        prop="orderTime"
                        class="idNumber">
            <el-input v-model="ruleForm.orderTime"
                      placeholder="下单时间"
                      :disabled="true">
            </el-input>
          </el-form-item>

          <el-form-item label="订单状态:"
                        prop="status"
                        class="idNumber">
            <el-input v-model="status"
                      placeholder="订单号"
                      :disabled="true">
            </el-input>
          </el-form-item>
        </div>

        <div class="thrid">

          <el-form-item label="会员:"
                        prop="isVip"
                        class="idNumber">
            <el-input v-model="isVip"
                      placeholder="是否是会员"
                      :disabled="true">
            </el-input>
          </el-form-item>

          <el-form-item label="备注:"
                        prop="remark"
                        class="idNumber">
            <el-input v-model="ruleForm.remark"
                      placeholder="无"
                      :autosize="{ minRows: 2, maxRows: 4}"
                      type="textarea"
                      style="width: 293px;"
                      :disabled="true">
            </el-input>
          </el-form-item>
        
        </div>

        <div class="forth" >

          
          <el-form-item label="退款时间:"
                        prop="cancelTime"
                        class="idNumber"
                        >
            <el-input v-model="ruleForm.cancelTime"
                      placeholder="无"
                      :disabled="true">
            </el-input>
          </el-form-item>

          <el-form-item label="退款原因:"
                        prop="rejectionReason"
                        class="idNumber">
            <el-input v-model="ruleForm.rejectionReason"
                      placeholder="无"
                       :autosize="{ minRows: 2, maxRows: 4}"
                      type="textarea"
                      style="width: 293px;"
                      :disabled="true">
            </el-input>
          </el-form-item>
        </div>

        <template v-if="this.$route.query.method == 1">
          <div class="fifth">

            <el-form-item label="收货人:"
                          prop="consignee"
                          class="idNumber">
              <el-input v-model="ruleForm.consignee"
                        placeholder="无"
                        :disabled="true">
              </el-input>
            </el-form-item>

            <el-form-item label="收货地址:"
                          prop="address"
                          class="idNumber">
              <el-input v-model="ruleForm.address"
                        placeholder="无"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        type="textarea"
                        style="width: 293px;"
                        :disabled="true">
              </el-input>
            </el-form-item>
          </div>

          <div class="seventh">

            <el-form-item label="预计送达时间:"
                          prop="estimatedDeliveryTime"
                          class="idNumber">
              <el-input v-model="ruleForm.estimatedDeliveryTime"
                        placeholder="无"
                        :disabled="true">
              </el-input>
            </el-form-item>

            <el-form-item label="手机号:"
                          prop="phone"
                          class="idNumber">
              <el-input v-model="ruleForm.phone"
                        placeholder="无"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        type="textarea"
                        style="width: 293px;"
                        :disabled="true">
              </el-input>
            </el-form-item>
          </div>

          <div class="sixth">

            <el-form-item label="取消时间:"
                          prop="cancelTime"
                          class="idNumber">
              <el-input v-model="ruleForm.cancelTime"
                        placeholder="无"
                        :disabled="true">
              </el-input>
            </el-form-item>

            <el-form-item label="取消原因:"
                          prop="cancelReason"
                          class="idNumber">
              <el-input v-model="ruleForm.cancelReason"
                        placeholder="无"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        type="textarea"
                        style="width: 293px;"
                        :disabled="true">
              </el-input>
            </el-form-item>
          </div>



        </template>
      </el-form>

      <div class="title" >订单商品：</div>
      <div class="details">
        <el-table
          :data="ruleForm.orderDetailList"
          stripe
          border
          style="width: 100%;">
          <el-table-column
            prop="name"
            label="商品名称"
            >
          </el-table-column>
          <el-table-column
            prop="image"
            label="图片"
            >
            <template slot-scope="scope">
              <img :src="scope.row.image" :alt="scope.row.name" style="height: 70px;"  v-image-preview>
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="amount"
            label="价格">
          <template slot-scope="scope" >
            {{ scope.row.amount }} ￥
          </template>
          </el-table-column>
        </el-table>

      </div>

    </div>
</div>
</template>


<script>
import {queryOrdersById} from '@/api/orderEmployee'
import {details} from '@/api/order'
export default{

data() {
  return {
    content:'订单详情',
    order:'',
    ruleForm:'',
    isVip:'',
    status:'',

  }
},
created(){
  this.init()
},
methods:{
  async init(){
    if(this.$route.query.method == 0){
      await queryOrdersById(this.$route.query.id).then((res)=>{
        this.ruleForm = res.data
    })
    }else{
      await details(this.$route.query.id).then((res)=>{
        this.ruleForm = res.data
        
      })
    }
    console.log(this.ruleForm)
    this.isVip = this.ruleForm.isVip == 1? '是' : '否'
    this.status = this.getStatus(this.ruleForm.status)

  },
  goBack(){
    this.$router.go(-1)
  },
  getStatus(status){
    switch(status){
		case 1:
			return '未付款';
		case 2:
			return '待接单';
		case 3:
			return '已接单';
		case 4:
			return '派送中';
		case 5:
			return '已完成';
		case 6:
			return '已取消';
		case 7:
			return '退款';
		default:
			return '???';
	}
  }

}
}
</script>

<style lang="scss" scoped>
.addBrand {
&-container {
  margin: 30px;
  margin-top: 0px;
  .HeadLable {
    background-color: transparent;
    margin-bottom: 0px;
    padding-left: 0px;
  }
  .container {
    position: relative;
    // z-index: 1;
    background: #fff;
    padding: 30px;
    border-radius: 4px;

  }
  .idNumber {
    margin-bottom: 39px;
  }

  .el-form-item {
    margin-bottom: 29px;
  }
  .el-input {
    width: 293px;
  }
}
}

.demo-ruleForm{
width: 600px;
}

.uploadImage{
border-radius: 5px;
}

.first,.second,.thrid,.forth,.fifth,.sixth,.seventh{
  display: flex;
  
}

::v-deep .idNumber .el-input__inner{
    color: #454242;
    // font-size:16px;
  }

::v-deep .idNumber .el-textarea__inner{
  color: #454242;
}

.details{
  line-height: 40px;
}

.title{
  line-height: 40px;
  display: flex;
  justify-content: start;
  // margin: 10px;
  font-weight: 500;
}
</style>